import React, { Component } from 'react'
import { Card, Icon } from 'antd'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import UrlPattern from 'url-pattern'
import * as excellentActions from '../actions/excellent-assignment'
import '../less/index.less'
import {TwsReactMarkdownPreview} from 'tws-antd'
import {studentExcellentAssignmentVideoUrl} from '../constant/constant-url'
import { FormattedMessage } from 'react-intl'

class StudentExcellentAssignmentVideoPageBody extends Component {
  constructor (props) {
    super(props)
    this.state = {
      programId: 0,
      taskId: 0,
      sectionId: 0
    }
  }
  componentDidMount () {
    const pattern = new UrlPattern(studentExcellentAssignmentVideoUrl)
    const urlParams = pattern.match(this.props.location.pathname) || {}
    this.setState({
      programId: urlParams.programId,
      taskId: urlParams.taskId,
      sectionId: urlParams.assignmentId
    }, () => {
      this.props.getExcellentHomeworkVideo(this.state.taskId, this.state.sectionId)
    })
  }

  render () {
    const excellentVideo = this.props.excellentVideo
    const videoAddress = `<video width="100%" id="video" controls="" preload="auto" poster="">
      <source id="mp4" src="${excellentVideo.videoAddress}" type="video/mp4">
      <p>抱歉，你的浏览器不支持在线视频播放。</p>
    </video>`

    return (
      <div>
        <Card title={<a onClick={() => window.history.back()}><Icon type='arrow-left' /><FormattedMessage id='返回我的作业' /></a>} noHovering bordered={false}>
          <TwsReactMarkdownPreview source={videoAddress} />
        </Card>
      </div>

    )
  }
}

const mapStateToProps = state => ({
  excellentVideo: state.excellentVideo
})

const mapDispatchToProps = dispatch => ({
  getExcellentHomeworkVideo: (taskId, sectionId) => dispatch(excellentActions.getExcellentHomeworkVideo(taskId, sectionId))
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(StudentExcellentAssignmentVideoPageBody))
